.docs {
	@media (min-width: $grid-float-breakpoint) {
		padding-top: 65px;
	}

	.docs-description,
	.clay-p {
		color: #6b6c7e;
	}

	.clay-site-separator {
		border-color: #e7e7ed;
		margin-bottom: 4px;
		width: 100%;
	}

	.clay-ullist {
		ul {
			margin-left: 1.25rem;
			margin-right: 0;
			margin-top: 0;
			padding-bottom: 0;
			padding-left: 0;
			padding-right: 0;
			padding-top: 0;
			margin-bottom: 1.25rem;
			list-style-position: outside;
			list-style-image: none;
		}

		li {
			margin-bottom: calc(1.45rem / 2);
		}

		&.clay-ullist-margin-sm {
			li {
				margin-bottom: 0.15rem;
			}
		}
	}

	header {
		padding: $base-size 0;

		@media (min-width: $grid-float-breakpoint) {
			padding: $base-size * 1.5 0;
		}

		@media (max-width: $screen-xs) {
			padding-top: 25px;
			padding-bottom: 25px;
		}

		@media (min-width: $screen-lg) {
			.container-fluid {
				margin-right: 3%;
				max-width: 97%;
			}
		}

		.navbar .container-fluid {
			padding: 0;
		}

		.docs-title {
			font-weight: 500;
			margin: 0;
		}

		.docs-subtitle {
			color: #6b6c7e;
			font-size: 22px;
			font-weight: 400;
			margin: 0 0 20px;
		}

		.docs-table {
			color: #6b6c7e;
			margin-bottom: 20px;
			width: auto;

			td,
			th {
				border-color: transparent;
				padding: 0.55rem;
			}

			th {
				padding-left: 0;
			}
		}

		.docs-description {
			margin: 0;
		}
	}

	.clay-h3 {
		font-weight: 700 !important;
		margin-bottom: $base-size * 1.2 !important;
		word-break: break-all;
	}

	.clay-h4 {
		font-weight: 600 !important;
		margin-bottom: $base-size * 1.2 !important;
		padding-top: $base-size * 1.1;
		word-break: break-all;
	}

	.clay-p {
		line-height: 1.5;
		margin-top: $base-size * 0.5;
	}

	blockquote {
		border-left: 0.25em solid #dfe2e5;
		color: #6a737d;
		margin-bottom: 2em;
		padding: 0 1em;
	}

	.clay-site-label {
		a:hover {
			text-decoration: none;
		}

		.label {
			margin-top: 0;
			margin-right: 8px;
		}

		.clay-site-label-status {
			border-right: 1px solid #e3e3e3;
			color: $brand-bg-dark;
			font-size: 14px;
			font-weight: 500;
			line-height: 1.2;
			margin-right: 8px;
			padding-right: 10px;
		}

		.clay-site-label-version {
			color: $brand-secondary;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.2;
		}
	}

	.alert-notifications-absolute {
		z-index: 5;
	}

	.sheet-example {
		position: relative;
		padding: 1.5rem;
		margin: 2rem -15px 0;
		margin-right: 0;
		margin-left: 0;
		border-width: 0.2rem;
		border: solid #f5f5f8;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;

		& ~ .code-container {
			margin-top: 0;

			.gatsby-highlight {
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}
		}
	}

	.nav-toc-title {
		@media (min-width: $screen-lg) {
			display: none;
		}
	}

	.nav-toc-absolute {
		@media (min-width: $screen-lg) {
			height: 100%;
			max-width: 280px;
			position: absolute;
			right: -295px;
			top: 0;

			.nav-toc {
				position: sticky;
			}
		}
	}

	.nav-toc {
		border-left: 5px solid $brand-light;
		margin-bottom: 30px;
		padding: 15px 15px 15px 0;

		a {
			color: #30313f;
			word-break: break-word;
		}

		ul {
			list-style-type: none;
			margin: 0;
			padding-left: 15px;
		}

		p {
			margin: 0;
		}

		@media (min-width: $screen-lg) {
			background-color: white;
			margin-bottom: 0;
			max-height: calc(100vh - 84px);
			min-width: 280px;
			overflow-y: auto;
			top: 84px;
			width: 100%;
			z-index: 1;
		}
	}
}

.about {
	font-size: 18px;
	padding: $base-size 0;
}

.about.about-inverted {
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
}

.clay-site-alert {
	padding: 20px 45px 20px 26px;

	.lead {
		display: block;
	}

	&.alert-dark,
	&.alert-warning,
	&.alert-info {
		border-radius: 0;
		border-bottom: none;
		border-right: none;
		border-top: none;
		border-left-style: solid;
		border-left-width: 9px;
	}

	&.alert-fixed {
		z-index: 9999;
		border: none;
		padding: 9px 45px 8px 26px;
	}
}

.fs-12 {
	font-size: 12px !important;
}

.list-api {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.list-api-item {
	margin-top: 32px;
}

.list-api-item-title {
	border-bottom: 2px solid rgb(244, 245, 247);
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.list-api-item-name {
	color: #b3472c;
	display: inline-block;
	margin-right: 0.8em;
	background: #ffd6cc;
	border-radius: 3px;
	padding: 0px 0.2em;
}

.list-api-item-type {
	color: #5e6c84;
	display: inline-block;
	background: #f4f5f7;
	border-radius: 3px;
	padding: 0px 0.2em;
}

.list-api-item-default {
	color: #5e6c84;
	font-weight: 500;
}

.list-api-item-required {
	color: #da1414;
	margin-left: 8px;
}

.list-api-item-code {
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #b3472b;
	display: inline-block;
}
